class JoyStick{
	constructor(options){
		const circle = document.createElement("div");
		if (options.left!==undefined){
			circle.style.cssText = "position:absolute; bottom:35px; width:80px; height:80px; background:radial-gradient(transparent 22px,#000000); border:#444 solid medium; border-radius:50%; left:20px;";
		}else if (options.right!==undefined){
			circle.style.cssText = "position:absolute; bottom:35px; width:80px; height:80px; background:radial-gradient(transparent 22px,#000000); border:#444 solid medium; border-radius:50%; right:20px;";
		}else{
			circle.style.cssText = "position:absolute; bottom:35px; width:80px; height:80px; background:radial-gradient(transparent 22px,#000000); border:#444 solid medium; border-radius:50%; left:50%; transform:translateX(-50%);";
		}
		const thumb = document.createElement("div");
		thumb.style.cssText = "position: absolute; left: 20px; top: 20px; width: 40px; height: 40px; border-radius: 50%; background: #fff;";
		circle.appendChild(thumb);
		document.body.appendChild(circle);
		this.domBg = circle;
		this.domElement = thumb;
		this.maxRadius = options.maxRadius || 40;
		this.maxRadiusSquared = this.maxRadius * this.maxRadius;
		this.onMove = options.onMove;
		this.app = options.app;
		this.origin = { left:this.domElement.offsetLeft, top:this.domElement.offsetTop };
		this.rotationDamping = options.rotationDamping || 0.06;
		this.moveDamping = options.moveDamping || 0.01;
		if (this.domElement!=undefined){
			const joystick = this;
			if ('ontouchstart' in window){
				// 原来是这里少了解除， 解除确实不该写在这里
				this.domElement.addEventListener('touchstart', function(evt){ evt.preventDefault(); joystick.tap(evt); }, {passive:false});
			}else{
				this.domElement.addEventListener('mousedown', function(evt){ evt.preventDefault(); joystick.tap(evt); },{passive:false});
			}
		}
	}
	//  这里就是事件的监听和解除之前有点问题，  初始化的时候， 监听 触控开始 和结束 ， 触控开始的时候就监听移动事件， 计算 forward up  ，
//   结束时 应取消 移动事件的监听， 可以选择是否复位， 这里的选择是复位。 
	
	set visible( mode ){
		const setting = (mode) ? 'block' : 'none';
		this.domElement.style.display = setting;
		this.domBg.style.display = setting;
	}

	getMousePosition(evt){
		let clientX = evt.targetTouches ? evt.targetTouches[0].pageX : evt.clientX;
		let clientY = evt.targetTouches ? evt.targetTouches[0].pageY : evt.clientY;
		return { x:clientX, y:clientY };
	}
	
	tap=(evt)=>{
		evt = evt || window.event;
		// get the mouse cursor position at startup:
		this.offset = this.getMousePosition(evt);
		// 应该在点触事件结束后 添加一个标记 ，还有就是这里应该用addevent 才行 ，这样才能多实例，这里应该是没有考虑多点触控的问题。
		if ('ontouchstart' in window){
			document.addEventListener('touchmove', this.moveHandler,{passive:false} )       
			document.addEventListener('touchend', this.endHandler) ;
		}else{
			
			document.addEventListener('mousemove', this.moveHandler,{passive:false} )       
			document.addEventListener('mouseup', this.endHandler) ;
		}
	}

	unTap=()=>{
		if ('ontouchstart' in window){
			document.removeEventListener('touchmove', this.moveHandler )       
			document.removeEventListener('touchend', this.endHandler) ;
		}else{
			
			document.removeEventListener('mousemove', this.moveHandler )       
			document.removeEventListener('mouseup', this.endHandler) ;
		}
	}

	moveHandler= (evt)=>{
		evt.preventDefault(); this.move(evt); 
	}
	endHandler=(evt)=>{
		evt.preventDefault(); this.up(evt); 

	}
	
	move(evt){
		evt = evt || window.event;
		const mouse = this.getMousePosition(evt);
		// calculate the new cursor position:
		let left = mouse.x - this.offset.x;
		let top = mouse.y - this.offset.y;
		//this.offset = mouse;
		
		const sqMag = left*left + top*top;
		if (sqMag>this.maxRadiusSquared){
			//Only use sqrt if essential
			const magnitude = Math.sqrt(sqMag);
			left /= magnitude;
			top /= magnitude;
			left *= this.maxRadius;
			top *= this.maxRadius;
		}
		// set the element's new position:
		this.domElement.style.top = `${top + this.domElement.clientHeight/2}px`;
		this.domElement.style.left = `${left + this.domElement.clientWidth/2}px`;
		
		const forward = -(top - this.origin.top + this.domElement.clientHeight/2)/this.maxRadius;
		const turn = (left - this.origin.left + this.domElement.clientWidth/2)/this.maxRadius;
		
		if (this.onMove!=undefined) this.onMove.call(this.app, forward, turn);// 传给外部
	}
	
	up=(evt)=>{
		// 解除似乎是写在这里了
		 this.unTap();// 解除绑定	
		// 复位
		this.domElement.style.top = `${this.origin.top}px`;
		this.domElement.style.left = `${this.origin.left}px`;
		this.onMove.call(this.app, 0, 0); //  这个应该就是复位的逻辑，
	}
}

export { JoyStick };